import wrapperTpl from './tpl/wrapper.tpl';
import itemTpl from './tpl/item.tpl';
import './index.scss';
import tools from '../../utils/tools';
import { ShowBoard } from '../show_board';
import { NoDataTip } from '../no_data_tip';

class Tab {
  constructor (el, fieldDatas, phoneDatas, keyword) {
    this.name = 'tab';
    this.$el = el;
    this.fieldDatas = fieldDatas;
    this.phoneDatas = phoneDatas;
    this.cache = {};
    this.keyword = keyword;
  }
  async init () {
    await this.render();
    this.bindEvent();
  }
  async render () {
    await this.$el.append(tools.tplReplace(wrapperTpl(), {
      list: this.renderList()
    }));
  }
  renderList () {
    var list = '';
    this.fieldDatas.forEach((item) => {
      list += tools.tplReplace(itemTpl(), {
        field: item.field,
        series_name: item.series_name
      })
    })
    return list;
  }
  /*
   *  绑定事件： click search
   *  search事件增加防抖处理
   */
  bindEvent () {
    const $tab = $('.J_tab'),
          $board = $('.J_board'),
          oShowBoard = new ShowBoard(),
          $search = $('#J_search');
    $tab.on('click', '.tab-item', {$board, oShowBoard}, $.proxy(this.tabClick, this));

    // $search.on('input', {$board, oShowBoard, $tab}, $.proxy(this.inputSearch, this));
    $search.on('input', {$board, oShowBoard, $tab}, tools.throttle($.proxy(this.inputSearch, this), 1000));
  }
  inputSearch (e) {
    const data = e.data,
          $board = data.$board,
          oShowBoard = data.oShowBoard,
          $tab = data.$tab,
          $tar = $(e.target),
          value = tools.trimSpace($tar.val()),
          valLen = value.length;
    this.tabChange($tab.find('.all'));
    if(valLen.length <= 0) {
      this.appendList('all', $board, oShowBoard);
    } else {
      this.appendList('all', $board, oShowBoard, value);
    }
  }
  tabClick (e) {
    const data = e.data,
          tar = e.target,
          $tar = $(tar),
          tagName = tar.tagName.toLowerCase(),
          $board = data.$board,
          oShowBoard = data.oShowBoard;
    if(tagName === 'a') {
      this.tabChange($tar);
      const field = $tar.attr('data-field');
      this.appendList(field, $board, oShowBoard);
    }
  }
  tabChange (target) {
    target.parent().addClass('current').siblings().removeClass('current');
  }
  appendList(field, $board, oShowBoard, keyword) {
    if(keyword) {
      let data = this.filterDatas(field, this.phoneDatas, keyword),
          dataLen = data.length;
      if(dataLen === 0) {
        $board.html(new NoDataTip().tpl('未搜索到相关数据'));
      } else {
        $board.html(oShowBoard.renderList(data));
      }
    } else {  
      if(!this.cache[field]) {
        this.cache[field] = oShowBoard.renderList(this.filterDatas(field, this.phoneDatas, keyword));
      }
      $board.html(this.cache[field]);
    }
  }
  filterDatas (field, datas, keyword) {
    return datas.filter((item) => {
      if(keyword) {
        const phone_name = item.phone_name.toLowerCase(),
              slogan = item.slogan.toLowerCase();
        keyword = keyword.toLowerCase();
        return phone_name.includes(keyword) || slogan.includes(keyword);
      } else {
        switch (field) {
          case 'all':
            return true;
            break;
          default:
            return item.field === field;
            break;
        }
      }
    })
  }
}
export { Tab }